/**
 * 响应式样式系统
 * -------------------
 * 本文件提供了一套完整的响应式样式系统，用于解决UniApp项目在不同设备上的布局问题
 * 特别是桌面网页打开时图片与卡片布局过度拉长的问题
 */

// 响应式断点
$breakpoints: (
  xs: 0,       // 超小设备（手机竖屏）
  sm: 576px,   // 小型设备（手机横屏）
  md: 768px,   // 中型设备（平板）
  lg: 992px,   // 大型设备（桌面）
  xl: 1200px,  // 超大型设备（大桌面）
  xxl: 1400px  // 特大型设备
);

// 移动设备断点
$mobile-breakpoints: (
  iphone-se: 375px,       // iPhone SE/小型手机
  iphone-pro-max: 428px   // iPhone Pro Max/大型手机
);

/**
 * 基础容器样式
 * -------------------
 */

// 容器
.mo-container {
  width: 100%;

  margin-right: auto;
  margin-left: auto;
  
  // 移动设备特别处理，确保在小屏幕上没有多余的边距
  @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  // 移动优先设计，在不同屏幕尺寸下限制最大宽度
  @media (min-width: map-get($breakpoints, sm)) {
    max-width: 540px;
  }
  
  @media (min-width: map-get($breakpoints, md)) {
    max-width: 720px;
  }
  
  @media (min-width: map-get($breakpoints, lg)) {
    max-width: 960px;
  }
  
  @media (min-width: map-get($breakpoints, xl)) {
    max-width: 1140px;
  }
  
  @media (min-width: map-get($breakpoints, xxl)) {
    max-width: 1320px;
  }
  
  // 针对index页面的特殊处理
  .pages-index-index & {
    @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

// 专门用于栅格系统的容器，拥有不同的内边距处理
.mo-container-grid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  
  // 移动设备上的内边距调整
  @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  // 桌面端限制宽度
  @media (min-width: map-get($breakpoints, sm)) {
    max-width: 540px;
  }
  
  @media (min-width: map-get($breakpoints, md)) {
    max-width: 720px;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  @media (min-width: map-get($breakpoints, lg)) {
    max-width: 960px;
  }
  
  @media (min-width: map-get($breakpoints, xl)) {
    max-width: 1140px;
  }
  
  @media (min-width: map-get($breakpoints, xxl)) {
    max-width: 1320px;
  }
}

// 桌面端模拟手机视图容器
.mo-mobile-container {
  // 在移动设备上，去除边距
  @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
  
  @media (min-width: map-get($breakpoints, md)) {
    max-width: 390px; // iPhone 12/13/14 Pro宽度
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 100vh;
    position: relative;
  }
}

/**
 * 栅格系统
 * -------------------
 */

// 栅格系统
.mo-row {
  display: flex;
  flex-wrap: wrap;
  
  // 在移动设备上，调整边距
  @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    margin-right: -10px;
    margin-left: -10px;
  }
  
  @media (min-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    margin-right: -15px;
    margin-left: -15px;
  }
}

// 生成列类
@mixin make-col($size, $columns: 12) {
  flex: 0 0 percentage($size / $columns);
  max-width: percentage($size / $columns);
}

// 生成所有的列类
@mixin make-grid-columns($breakpoint) {
  @for $i from 1 through 12 {
    .mo-col-#{$breakpoint}-#{$i} {
      @include make-col($i);
    }
  }
}

// 基础列
.mo-col {
  position: relative;
  width: 100%;
  
  // 在移动设备上，调整内边距
  @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    padding-right: 10px;
    padding-left: 10px;
  }
  
  @media (min-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    padding-right: 15px;
    padding-left: 15px;
  }
}

// 默认列（移动优先）
@for $i from 1 through 12 {
  .mo-col-#{$i} {
    @include make-col($i);
  }
}

// 响应式列 - 强化媒体查询
.mo-col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: map-get($breakpoints, md)) {
  .mo-col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: map-get($breakpoints, lg)) {
  .mo-col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

// 原有的响应式列生成
@each $breakpoint, $width in $breakpoints {
  @if $width > 0 {
    @media (min-width: $width) {
      @include make-grid-columns($breakpoint);
    }
  }
}

/**
 * 响应式辅助类
 * -------------------
 */

// 在不同屏幕尺寸下隐藏/显示
@each $breakpoint, $width in $breakpoints {
  .mo-hide-#{$breakpoint} {
    @if $width == 0 {
      display: none;
    } @else {
      @media (min-width: $width) {
        display: none;
      }
    }
  }
  
  .mo-show-#{$breakpoint} {
    @if $width == 0 {
      display: block;
    } @else {
      display: none;
      @media (min-width: $width) {
        display: block;
      }
    }
  }
}

// 图片响应式
.mo-img-fluid {
  max-width: 100%;
  height: auto;
}

// 卡片限宽
.mo-card-container {
  @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  
  @media (min-width: map-get($breakpoints, md)) {
    max-width: 100%;
  }
  
  @media (min-width: map-get($breakpoints, lg)) {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

/**
 * 边距修正工具类
 * -------------------
 */

.mo-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mo-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

// 移动端边距消除类 - 在小屏幕下自动消除左右边距
.mo-no-margin-mobile {
  @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

// 确保内容不会溢出容器
.mo-overflow-hidden {
  overflow-x: hidden !important;
}

/**
 * 全局样式和平台特定修正
 * -------------------
 */

// 全局容器修正
.uni-page-body {
  width: 100%;
  overflow-x: hidden;
}

// 修正移动设备上的页面边距
@media screen and (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
  uni-page {
    padding: 0;
    margin: 0;
  }
  
  .uni-page-wrapper {
    padding: 0;
    margin: 0;
  }
  
  .page-container {
    padding-left: 0;
    padding-right: 0;
  }
  
  .inner-container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/**
 * 平台特定修正
 * -------------------
 */

// H5环境修正
// #ifdef H5
@media screen and (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
  .uni-page-head-hd,
  .uni-page-head-ft {
    padding-left: 0;
    padding-right: 0;
  }
  
  uni-page-wrapper {
    overflow-x: hidden;
  }
  
  .uni-page-body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
// #endif

// 微信小程序环境修正
// #ifdef MP-WEIXIN
@media screen and (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
// #endif

// 手机APP环境修正
// #ifdef APP-PLUS
.uni-page-body {
  width: 100%;
  overflow-x: hidden;
}
// #endif

/**
 * 页面特定修正
 * -------------------
 */

// H5环境中index页面的特殊处理
// #ifdef H5
.pages-index-index {
  .uni-page-head {
    width: 100%;
  }
  
  .uni-page-wrapper,
  .uni-page-body {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  // 确保外层容器没有边距
  .page-outer {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  // 调整内层容器在桌面端的表现
  .mo-container {
    // 小屏幕时去除边距
    @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    
    // 大屏幕时限制宽度
    @media (min-width: map-get($breakpoints, lg)) {
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
    }
    
    @media (min-width: map-get($breakpoints, xl)) {
      max-width: 1140px;
    }
    
    @media (min-width: map-get($breakpoints, xxl)) {
      max-width: 1320px;
    }
  }
}
// #endif

// 微信小程序中index页面的特殊处理
// #ifdef MP-WEIXIN
.pages-index-index {
  .page-outer {
    padding: 0 !important;
    margin: 0 !important;
  }
}

.pages-index-index .mo-container {
  @media (max-width: map-get($mobile-breakpoints, iphone-pro-max)) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
// #endif

/**
 * 使用说明:
 * 1. 桌面端限制为手机视图: 使用 class="mo-mobile-container"
 * 2. 响应式栅格: 使用 mo-row 和 mo-col-* 类
 * 3. 修复图片拉伸: 使用 class="mo-img-fluid"
 * 4. 修复卡片拉伸: 使用 class="mo-card-container"
 * 5. 响应式显示/隐藏: 使用 mo-show-* 和 mo-hide-* 类
 */ 